<template>
  <view class="goods-detail-container" v-if="goods_Detail.status==='success'">
    <!-- 轮播图区域 -->
    <u-swiper height="750" :list="goods_Detail.goods_Detailst.goodswep.split('\n')"  border-radius="0">
    </u-swiper>
    <!-- 商品信息区域 -->
    <view class="goods-info-box">

      <!-- 商品价格 -->
         <slot></slot>
      <!-- 商品信息主体区域 -->
      <view class="goods-info-body">
        <!-- 商品的名字 -->
        <view class="goods-name">{{goods_Detail.goods_Detailst.name}}</view>
        <!-- 收藏 -->
        <view class="favi" :class="{active:user.iscollect}" @click="collect">
          <u-icon :name="user.iscollect?'star-fill':'star'" size="36rpx" ></u-icon>
          <text>{{user.iscollect?'已收藏':'收藏'}}</text>
        </view>
      </view>
      <!-- 运费 -->
      <view class="yf">快递：免运费</view>
    </view>

    <!-- 商品导航组件区域 -->
    <view class="goods_nav">
      <view class="navigation">
        <view class="left">
          <view class="item">
            <u-icon name="home" size="45rpx" :color="$u.color['contentColor']"></u-icon>
            <view class="text u-line-1">店铺</view>
          </view>
          <view class="item car" @click="tiaozcart">
            <u-badge class="car-num" :count="cartstore.allcount" type="error" :offset="[-3, -6]"></u-badge>
            <u-icon name="shopping-cart" size="45rpx" :color="$u.color['contentColor']"></u-icon>
            <view class="text u-line-1">购物车</view>
          </view>
        </view>
       <slot name="goumaibut"></slot>
      </view>
    </view>
    <!-- 商品信息和评价区域 -->
    <view class="goods_deta">
      <view class="tab-bar">
        <view class="tab-item1" :class="{active: tabIndex === 0}" @click="tabIndex = 0">商品详情</view>
        <view class="tab-item2" :class="{active: tabIndex === 1}" @click="tabIndex = 1">商品评价</view>
      </view>
      <view class="xiang" v-if="tabIndex === 0">
        <view class="title">
          商品描述
        </view>
        <u-image :src="item" v-for="(item,index) in goods_Detail.goods_Detailst.goodsfigure.split('\n')" :key="index"
          mode="widthFix"></u-image>
      </view>
      <view class="comments" v-if="tabIndex === 1">
        <view class="comment-list" v-if="goods_Detail.goods_comment.length !==0">
          <view class="comment" v-for="(comment, index) in goods_Detail.goods_comment" :key="index">
            <view class="comment-header">
              <image class="avatar" :src="comment.avatar"></image>
              <view class="namepj">
                <view class="user-name">{{ comment.username }}</view>
                <view class="evaluate">
                  <!-- <u-rate :count="count" v-model="value"></u-rate> -->
                  <u-rate gutter="0" :count="5" v-model="comment.rating"></u-rate>
                  <view class="pingjia">
                    非常满意
                  </view>
                </view>
              </view>

            </view>
            <view class="comment-content">{{ comment.content }}</view>
            <view class="comment-images">
              <image class="image" v-for="(image, index) in comment.CommetImg.split('\n')" :src="image"
                mode="aspectFill" :key="index" v-if="comment.CommetImg">
              </image>
            </view>
            <view class="comment-time">{{ Formattime(comment.created_time) }}</view>
          </view>
        </view>
        <view class="" v-else>
          暂无评论
        </view>
      </view>
    </view>

  </view>
  <view class="tiancong">

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app';
  //导入格式化时间函数
  import {
    Formattime
  } from "/src/utile/setime.js"
  import {
    cartStore
  } from "../../store/cart.js"
  const cartstore = cartStore()
  import {
      goodsStore
    } from "../../store/goods.js"

  const goodStore = goodsStore()
  import {
    useUserStore
  } from "../../store/user.js"
  const userStore = useUserStore()
  const {user} = userStore
  //定义商品id
  const goods_id = ref(0)
  const {
   goods_Detail
  } = goodStore
  onLoad((options) => {
    goods_id.value = options.goods_id
    goodStore.getgoodsDetail(options.goods_id)
    userStore.Iscollect(options.goods_id)
    //获取购物车信息
    cartstore.getcart()
  });
//收藏该商品
function collect(){
  userStore.collect(goods_id.value)
}
  //定义选中详情还是评价
  const tabIndex = ref(0)
  //跳转购物车
  function tiaozcart(){
    uni.redirectTo({
      url:"/pages/cart/cart"
    })
  }
</script>

<style scoped lang="scss">
  .goods-detail-container {
    box-sizing: border-box;

    .navigation {

      display: flex;
      border: solid 2rpx #f2f2f2;
      background-color: #ffffff;
      padding: 30rpx 0;

      .left {
        width: 27%;
        display: flex;
        font-size: 20rpx;

        .item {
          margin: 0 20rpx;

          &.car {
            text-align: center;
            position: relative;

            .car-num {
              position: absolute;
              top: -10rpx;
              right: -10rpx;
            }
          }
        }
      }

      
    }

    .goods_nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 10;
    }

    //  商品信息区域 

    .goods-info-box {
      background-color: #ffffff;
      position: relative;
      // padding: 0 20rpx;
      padding-right: 0;
      padding-bottom: 20rpx;

    


      .goods-info-body {
        display: flex;
        justify-content: space-between;
  padding: 0 20rpx;
        .goods-name {
          font-size: 30rpx;
          margin-right: 20rpx;
          font-weight: 700;
        }

        .favi {
          margin-left: 60rpx;
          width: 60px;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: gray;
        }
        .active{
          color: #ffaa00;;
        }
      }

      .yf {
          padding: 0 20rpx;
        font-size: 12px;
        color: gray;
        margin: 10px 0;
      }
    }


    .goods_deta {
      // border: 1px solid red;
      background-color: #ffffff;

      .tab-bar {
        display: flex;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 35rpx;
        color: #999999;
        text-align: center;
        border-bottom: 2rpx solid #f1f1f1;

        .active {
          color: #ff0000;
          font-weight: 600;
        }

        .tab-item1 {

          width: 50%;
        }

        .tab-item2 {
          width: 50%;
        }
      }

      .xiang {
        .title {
          height: 80rpx;
          line-height: 80rpx;
          font-weight: 600;
          margin-left: 20rpx;
        }


      }

      .comments {
        .comment-list {
          background-color: #fff;
          border-radius: 10rpx;
          box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
        }

        .comment {
          // position: relative;
          padding: 60rpx 20rpx;
          border-bottom: 1rpx solid #f5f5f5;
        }

        .comment-header {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
          // border: solid 1px red;
          height: 100rpx;

          .avatar {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
            border-radius: 50%;
            display: inline-block;
            // border: solid 1px red;
          }

          .namepj {
            // border: solid 1px red;
            // height: 80rpx;
            margin-right: 10rpx;
            display: inline-block;

            .user-name {
              font-size: 28rpx
            }

            .evaluate {
              margin-top: 5rpx;
              display: flex;
              align-items: center;

              .pingjia {
                font-size: 25rpx;
                color: #ff5c15;
                margin-left: 10rpx;

              }
            }

          }
        }

        .comment-content {
          font-size: 27rpx;
          line-height: 40rpx;
        }

        .comment-time {
          color: #999;
          font-size: 20rpx;
          margin-top: 20rpx;

        }

        .comment-images {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10rpx;
        }

        .image {
          width: 160rpx;
          height: 160rpx;
          margin-right: 15rpx;
          margin-bottom: 10rpx;
          border-radius: 10rpx;
        }
      }
    }
  }

  .tiancong {
    height: 140rpx;
  }

  //底部导航
</style>